@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
   font-family: Ext2;
   src: url('./assets/fonts/Exo2.ttf') format('truetype');
}

@font-face {
   font-family: UbuntuMono;
   src: url('./assets/fonts/UbuntuMono.ttf') format('truetype');
}

input {
   @apply focus:outline-none bg-gray-200 px-4 py-1;
}

@layer components {
   .box {
      @apply px-8 py-6 bg-white shadow-lg hover:shadow-lg duration-150;
   }
   .btn {
      @apply px-6 py-1 text-white tracking-wider;
   }
   .checkbox {
      @apply h-4 w-4 border-gray-200 cursor-pointer accent-indigo-600 rounded-lg;
   }
   .icon{
      @apply cursor-pointer flex justify-center items-center rounded-full h-6 w-6 hover:bg-gray-200
   }
}

@layer utilities {
   .scrollbar::-webkit-scrollbar {
      width: 4px;
      height: 4px;
   }

   .scrollbar::-webkit-scrollbar-track {
      border-radius: 100vh;
      background: #9b9997;
   }

   .scrollbar::-webkit-scrollbar-thumb {
      background: #4e4e4e;
      border-radius: 100vh;
   }
}
